<template>
  <div class="app-container">
    <el-card style="width: 100%">
      <el-row
        style="margin: 5px 0px"
        type="flex"
        justify="space-around">
        <el-col :span="12">
          <span style="margin-right: 20px">产品编号：{{ product_no }}</span>
          <span
            style="margin-right: 20px"
            v-if="productDetailInfo">
            产品名称：{{ productDetailInfo.product_name }}
          </span>
          <span
            style="margin-right: 20px"
            v-if="productDetailInfo">
            供应商：{{ productDetailInfo.supplier.name }}
          </span>
        </el-col>
        <el-col
          :span="12"
          style="text-align: right">
          <el-button
            type="primary"
            size="medium"
            icon="el-icon-s-promotion"
            @click="handleTransferAction">
            在线调用
          </el-button>
        </el-col>
      </el-row>
      <table-list
        ref="tableList"
        :fields="tableDataColumn"
        :pagination="true"
        :searchFunc="realNameVerificationGetList"
        :searchDefault="searchConditions"
        border></table-list>
    </el-card>
  </div>
</template>
<script>
import Transfer from '@/views/product/operator/realNameVerification/transfer';
import Detail from '@/views/product/operator/realNameVerification/detail';
import { realNameVerificationGetList } from '@/api/product';
import TableList from '@/components/TableList/index';
import getProductInfo from '@/mixins/getProductInfo';
import { getList as getUserList } from '@/api/user';
export default {
  name: 'list',
  props: {
    product_no: {
      type: [String, Number],
      default: '',
    },
    showIdCard: {
      // 是否展示身份证
      type: Boolean,
      default: true,
    },
    showXhzw: {
      type: Boolean,
      default: false,
    },
    showOperator: {
      type: Boolean,
      default: false,
    },
    showPhone: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    TableList,
  },
  mixins: [getProductInfo],
  data() {
    return {
      realNameVerificationGetList,
      productListData: [],
      pageSize: 10,
      currentPage: 1,
      loading: false,
      total: 0,
      searchConditions: {
        product_no: this.product_no,
      },
    };
  },
  created() {
    this.getListData();
    if (!this.$store.state.user.info.roles.includes('admin')) {
      this.searchConditions['user_id'] = this.$store.state.user.info.id;
    }
  },
  computed: {
    tableDataColumn() {
      let column = [
        {
          prop: 'id',
          searchName: 'id',
          label: 'ID',
          minWidth: '60',
          searchType: 'input',
          exact: true,
        },
        {
          prop: 'name',
          searchName: 'name',
          label: '姓名',
          minWidth: '120',
          searchType: 'input',
          baseSeachColumn: true,
        },
        {
          prop: 'phone',
          searchName: 'phone',
          label: '手机号码',
          minWidth: '120',
          searchType: 'input',
          showField: this.showPhone,
        },
        {
          prop: 'id_card',
          searchName: 'id_card',
          label: '身份证',
          minWidth: '160',
          searchType: 'input',
          showField: this.showIdCard,
        },
        {
          prop: 'message',
          searchName: 'message',
          label: '查询结果',
          minWidth: '200',
          searchType: 'input',
        },
        {
          prop: 'origin_result',
          searchName: 'origin_result',
          label: '认证结果',
          minWidth: '220',
          searchType: 'input',
        },
        {
          prop: 'real_operator',
          searchName: 'real_operator',
          label: '运营商',
          minWidth: '120',
          searchType: 'input',
          showField: this.showOperator,
        },
        {
          prop: 'is_xhzw',
          searchName: 'is_xhzw',
          label: '携号转网',
          options: [
            {
              value: 1,
              label: '是',
              color: '#67C23A',
            },
            {
              value: 2,
              label: '否',
              color: '#F56C6C',
            },
          ],
          minWidth: '120',
          searchType: 'select',
          showField: this.showXhzw,
        },
        {
          prop: 'is_charge',
          searchName: 'is_charge',
          label: '计费',
          options: [
            {
              value: 1,
              label: '是',
              color: '#67C23A',
            },
            {
              value: 0,
              label: '否',
              color: '#F56C6C',
            },
          ],
          minWidth: '120',
          searchType: 'select',
        },
        {
          prop: 'rate',
          label: '费用',
          minWidth: '120',
        },
        {
          prop: 'created_at',
          searchName: 'created_at',
          label: '创建时间',
          minWidth: '180',
          searchType: 'dateTime',
        },
        {
          label: '操作',
          searchField: false,
          render: (h, scope) => {
            return (
              <div>
                <el-button
                  size='mini'
                  type='text'
                  onClick={() => {
                    this.showDetailAction(scope.row);
                  }}>
                  查看
                </el-button>
              </div>
            );
          },
          fixed: 'right',
          minWidth: '160',
        },
      ];
      if (this.$store.state.user.info.roles.includes('admin')) {
        column.push({
          prop: 'user.nick_name',
          searchName: 'user_id',
          label: '用户',
          minWidth: '120',
          searchType: 'remoteSelect',
          searchAction: getUserList,
          searchKey: 'id',
          searchLabel: 'nick_name',
          exact: true,
        });
      }
      return column;
    },
  },
  methods: {
    handleTransferAction() {
      this.showTransferAction();
    },
    showTransferAction() {
      this.$createDialog({
        title: '在线调用',
        component: Transfer,
        width: '40%',
        props: {
          productNo: this.product_no,
          showIdCard: this.showIdCard,
          showPhone: this.showPhone,
        },
        buttons: [{ text: '提交', callback: 'handleSubmit', name: 'submit' }],
      });
    },
    refreshAction() {
      this.$set(this, 'currentPage', 1);
      this.$set(this, 'pageSize', 10);
      this.getListData();
    },
    handleSizeChange(val) {
      this.$set(this, 'currentPage', 1);
      this.$set(this, 'pageSize', val);
      this.getListData();
    },
    handleCurrentChange(val) {
      this.$set(this, 'currentPage', val);
      this.getListData();
    },
    getListData() {
      this.loading = true;
      realNameVerificationGetList({
        page: this.currentPage,
        limit: this.pageSize,
        where: this.searchConditions,
      }).then(res => {
        this.$set(this, 'productListData', res.data.data);
        this.$set(this, 'total', res.data.total);
        this.loading = false;
      });
    },
    showDetailAction(row) {
      this.$createDialog({
        title: '详情',
        component: Detail,
        width: '40%',
        props: {
          formData: row,
          showIdCard: this.showIdCard,
        },
        buttons: [{ text: '关闭', callback: 'handleSubmit', name: 'submit' }],
      });
    },
  },
};
</script>
